<template>
	<view>
		<view class="content">
			<u-navbar title="历史记录" :title-size="36" :title-width="500" title-color="#fff"
				back-icon-name="arrow-left" back-icon-color="#fff" :background="background" :custom-back="goBack">
			</u-navbar>
			<view class="list">
				<view class="list-center" v-for="item in list" @click="view(item)">
					<div>
						<span class="event">
							{{item.name}}
						</span>
						</div>
						<span class="time">{{item.reportTime}}</span>
					<i class="icon_right_gray"></i>
				</view>
			</view>
					<u-loadmore v-if='showStatus' :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				list: [],
				status:'loadmore',
				lastId:'',
				showStatus:true
			}
		},
		mounted() {
			this.meetListAll()
			
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			meetListAll(){
				this.status = 'loading';
				this.$api.reqApi.getIncidentMaterialList(this.lastId).then(res => {
					
					setTimeout(()=>{
						uni.stopPullDownRefresh()
					},1000)
					if(res.data.length>0){
						res.data.forEach(ele=>{
							this.list.push(ele)
						})
						this.lastId = res.data[res.data.length-1].id
						if(res.data.length<=14) this.showStatus = false
						this.status = 'loadmore'
					}else{
						this.status = 'nomore'
					}
			})	
			},
			view(item) {
                uni.navigateTo({url: '/pages/scheduling/resourceReport/view?list='+ encodeURIComponent(JSON.stringify(item))})
			},
			onPullDownRefresh() {
				this.list = []
				this.lastId =''
				this.meetListAll()
			},
			onReachBottom() {
				if (this.status == 'loading' || this.status == 'nomore') {
					return;
				}
					this.meetListAll()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin-bottom: 40rpx;
	}
    .list{
		margin: 30rpx 0;
	}
	.list-center {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14rpx 24rpx;
		border-bottom: 1px solid #dde0e4;
		height: 100rpx;
		line-height: inherit;
		div{
			font-size: 28rpx;
		}
		.icon_right_gray{
			display: inline-block;
			width: 28rpx;
			height: 28rpx;
			background: url(../../../assets/images/home/icon_right_gray.png) no-repeat 0 0;
			background-size: 100% 100%; 
		}
	}

	.event {
		width: 350rpx;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 32rpx;
		color: #2a2c32;
	}
	.time{
		color: #666;
		display: inline-block;
		font-size: 26rpx;
	}
</style>
